<template>
	<view class="user">
		<view class="form">
			<u--form labelPosition="left" labelWidth='80' :model="dataForm" ref="uForm">
				<u-form-item label="昵称:" prop="time" ref="item1">
					<u-input v-model="dataForm.nickName" :type="type" border="bottom" />
				</u-form-item>
				<u-form-item label="头像:" prop="img" ref="item1">
					<div class="image" @click="upload">
						<image v-if="dataForm.avatarUrl" :src="dataForm.avatarUrl" mode=""></image>
						<u-icon v-if="!dataForm.avatarUrl" name="camera-fill" size="38">
						</u-icon>
					</div>
				</u-form-item>
			</u--form>
		</view>
		<view @click="submit" class="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {
					avatarUrl: uni.getStorageSync('userInfo').avatarUrl,
					nickName: uni.getStorageSync('userInfo').nickName,
					id: uni.getStorageSync('userInfo')._id
				}
			}
		},
		onShow() {},
		methods: {
			submit() {
				let _this = this;
				let data = this.dataForm
				_this.$cloudApi.call({
					name: 'updateUser',
					data,
					success: res => {
						// uni.reLaunch({
						// 	url: '/pages/index/index'
						// })
						uni.showToast({
							title: '修改成功',
							icon: 'success',


						});
						let a = uni.getStorageSync('userInfo'); //拿到后台返回的用户信息
						a.nickName = _this.dataForm.nickName
						a.avatarUrl = _this.dataForm.avatarUrl
						console.log(a);
						uni.setStorageSync('userInfo', a); //拿到后台返回的用户信息
					}
				});

			},
			upload() {
				let that = this
				// 选择图片，默认不设置count属性的话最多9张
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res);
						// 通过遍历调用uniCloud.uploadFile来批量上传
						// that.dataForm.img.push(...res.tempFilePaths)
						uni.showLoading({
							title: "上传中..."
						})
						let filePath = res.tempFilePaths[0] // 选择图片的临时路径
						const name = res.tempFilePaths[0] // 选择图片的名称.后缀名
						let pos = name.lastIndexOf('/') // '/'所在的最后位置
						let str = name.substr(pos + 1) //截取文件名称和后缀  
						uniCloud.uploadFile({
							filePath, // 必传，要上传的文件对象临时路径
							cloudPath: str, // 必传，保存在云端的文件名，这样写上传后就是原本的名称与后缀名
							success(ress) {
								that.dataForm.avatarUrl = ress.fileID
								uni.showToast({
									title: '上传成功',
									icon: 'success',
								});
							},
							fail(err) {
								console.log(err)
							},
							complete() {
								uni.hideLoading()
							}
						})
					},
					fail(fail) {
						console.log(fail);
					}
				})
			},

		}
	}
</script>

<style scoped lang="less">
	.user {
		padding: 20rpx;
		position: relative;

		.submit {
			background: #007AFF;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			padding: 20rpx;
			width: 90%;
			// margin-top: 140rpx;
			position: fixed;
			bottom: 50rpx;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.form {
			padding: 30rpx;

			.image {
				display: flex;
				flex-wrap: wrap;

				.box {
					position: relative;
					margin-right: 10rpx;

					.delet {
						position: absolute;
						background-color: red;
						border-radius: 50%;
						top: -10rpx;
						right: -10rpx;
						color: red;
						padding: 5rpx;
					}

				}

				image {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>